<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<title>表</title>
	<meta name="renderer" content="webkit">
  	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../css/topbar.css">
	<link rel="stylesheet" href="../css/list.css">
	<link rel="stylesheet" href="../layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.css">
<style>
	.container{
		width: 1000px;
	}
	.commentbox{
		width: 900px;
		margin: 20px auto;
	}
	.mytextarea {
	    width: 100%;
	    overflow: auto;
	    word-break: break-all;
	    height: 100px;
	    color: #000;
	    font-size: 1em;
	    resize: none;
	}
	.comment-list{
		width: 900px;
		margin: 20px auto;
		clear: both;
		padding-top: 20px;
	}
	.comment-list .comment-info{
		position: relative;
		margin-bottom: 20px;
		margin-bottom: 20px;
		border-bottom: 1px solid #ccc;
	}
	.comment-list .comment-info header{
		width: 10%;
		position: absolute;
	}
	.comment-list .comment-info header img{
		width: 100%;
		border-radius: 50%;
		padding: 5px;
	}
	.comment-list .comment-info .comment-right{
		padding:5px 0px 5px 11%; 
	}
	.comment-list .comment-info .comment-right h3{
		margin: 5px 0px;
	}
	.comment-list .comment-info .comment-right .comment-content-header{
		height: 25px;
	}
	.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
		padding-right: 2em;
		color: #aaa;
	}
	.comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
		cursor: pointer;
	}
	.comment-list .comment-info .comment-right .reply-list {
		border-left: 3px solid #ccc;
		padding-left: 7px;
	}
	.comment-list .comment-info .comment-right .reply-list .reply{
		border-bottom: 1px dashed #ccc;
	}
	.comment-list .comment-info .comment-right .reply-list .reply div span{
		padding-left: 10px;
	}
	.comment-list .comment-info .comment-right .reply-list .reply p span{
		padding-right: 2em;
		color: #aaa;
	}


	/**自定义*/
	.more-a a{color: #7b7f81;font-size: 14px}
	.more-a a:hover { color: #22d18e; }
</style>
</head>
<body>
	<div class="main">
		<div class="top">
			<label>校园BBS系统</label>
		</div>
		<div class="bar"><p>您尚未
			<a href="login.html" target="_blank">登录</a>&nbsp;|
	  		<a href="register.html" target="_blank">注册</a>
	  		</p>
		</div>
		<div class="crumbs">
        	<span class="layui-breadcrumb">
  				<a href="index.html"><i class="layui-icon layui-icon-home"></i>&nbsp;论坛主页</a>
  				<a href=""><i class="layui-icon layui-icon-read"></i>&nbsp;c语言</a>
  				<a><cite>待定</cite></a>
			</span>	
		</div>
	
<div class="container" style="background:rgba(226, 238, 214,0.8);">
	<div class="commentbox">
		<textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content" style="border-radius: 5px;margin-left: 100px;width: 700px"></textarea>
		<div style="padding-right: 100px;">
		<div class="btn btn-info pull-right" id="comment">评论</div>
		</div>
	</div>
	<div class="comment-list">
	</div>
	<div  class="more-a" style="padding-bottom: 100px;padding-top: 50px;padding-left: 400px"><a href="">加载更多>></a></div>
</div>
</div>
<script type="text/javascript" src="../layui/layui.js"></script>
<script type="text/javascript">
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});
</script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.comment.js" ></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
	function check() {
	if(document.getElementById("content").value==''){alert("请输入内容!");return false;}
	return true;
}
</script>
<script type="text/javascript">
	//初始化数据
	var arr = [
		{id:1,img:"./images/1.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[]},
		{id:2,img:"./images/2.jpg",replyName:"匿名",beReplyName:"",content:"到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？” 那孩子回答：“23。” 我又问：“两只鸡多少钱？” 孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[{id:3,img:"",replyName:"帅大叔",beReplyName:"匿名",content:"来啊，我们一起吃鸡",time:"2017-10-17 11:42:53",address:"",osname:"",browse:"谷歌"}]},
		{id:3,img:"./images/3.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"同学聚会，看到当年追我的屌丝开着宝马车带着他老婆来了，他老婆是我隔壁宿舍的同班同学，心里后悔极了。",time:"2017-10-17 11:42:53",address:"深圳",osname:"win10",browse:"谷歌",replyBody:[]}
	];
	$(function(){

		$(".comment-list").addCommentList({data:arr,add:""});
		$("#comment").click(function(){
			if(check()==true){
			var obj = new Object();
			obj.img="./images/4.jpg";
			obj.replyName="懒人";
			obj.content=$("#content").val();
			obj.browse="深圳";
			obj.osname="win10";
			obj.replyBody="";
			$(".comment-list").addCommentList({data:[],add:obj});
		}
		});
	})
</script>
</body>
</html>